<template>
	<view class="content">
		<door-navbar :isShowLeft="true" :isShowRight="true"></door-navbar>
		<u-tabs :list="tabs" ref="uTabs" :scrollable="false" :current="current" lineWidth="200rpx" lineHeight="4rpx"
			lineColor="#1cc7c2" :activeStyle="{
	        color: '#333',
	        fontWeight: 'bold',
			fontSize:'28rpx',
	        transform: 'scale(1.01)',
			paddingBottom:'20rpx',
	    }" :inactiveStyle="{
	        color: '#999',
			fontSize:'28rpx',
	        transform: 'scale(1)',
			paddingBottom:'20rpx',
	    }" itemStyle="width:165rpx;height: 70rpx;background:#fff" @change="tabsChange">
		</u-tabs>
		<swiper class="swiper" :current="current" @animationfinish="animationfinish">
			<swiper-item v-for="(tab,t_index) in tabs">
				<door-empty v-if="tab.list.length == 0" text="暂无信息"></door-empty>
				<u-list @scrolltolower="scrolltolower" v-if="tab.list.length > 0" :preLoadScreen="tab.page * 4"
					height="calc(100vh - 190rpx)">
					<u-list-item v-for="(item, index) in tab.list" :key="index">
						<view class="list_item">							
							<view class="list_item_top">
								<text style="font-size: 28rpx;font-weight: 800;width: 520rpx;">{{item.classesName}}【{{item.teacherNameJw}} {{item.teacherNameJx}}】</text>								
							</view>
							<view class="list_item_info">								
								<view class="list_item_info_text">									
									<view class="title">{{item.studentName}}{{item.createTime}} {{item.teacherName}}</view>
									<u-icon :label="item.consumeAmount" size="28rpx" color="#333" labelSize="32rpx" top="2rpx"
										labelColor="#333" name="rmb"></u-icon>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</swiper-item>
		</swiper>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				payType: 1,
				tabs: [{
					name: '全部',
					list: [],
					page: 1,
					orderStatus: 0,
					status: 'loadmore',
				}],
				allList: [],
				curClassesName: ''
			};
		},
		onLoad(option) {
			this.curClassesName = option.classesName;
			this.getMyOrderList();
		},
		onPullDownRefresh() {
			this.tabs[0].page = 1;
			this.getMyOrderList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getTimeCountDown(time, isDropOrd) {
				if (!time) return;
				let dateTime = new Date(time.replace(/-/g, "/"))
				let now = new Date();
				if (isDropOrd == 1) {
					if (dateTime.getTime() + (60000 * 60 * 24) <= now.getTime()) {
						return 0
					} else {
						return dateTime.getTime() + (60000 * 60 * 24) - now.getTime()
					}
				} else {
					if (dateTime.getTime() + 180000 <= now.getTime()) {
						return 0
					} else {
						return dateTime.getTime() + 180000 - now.getTime();
					}
				}
			},
			getMyOrderList() {
				this.$set(this.tabs[this.current], 'status', 'loading');
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'));				
				let studentId = '';
				let teacherId = '';
				let phone = userInfo.phone;
				if (userInfo.isTeacher) {
					teacherId = userInfo.userId;
				}else {	
					studentId = userInfo.userId;
				}				
				let page = this.tabs[this.current].page;
				let token = uni.getStorageSync('token')
					uni.request({
						method: 'POST',
						url: `${this.$webBaseUrl}/api/nft-school/userApp/getConsume`,
						timeout: 30000,
						header: {
							'Content-Type': 'application/json',
							"Authorization": token
						},
						data: {
							pageNo: this.tabs[this.current].page,
							pageSize: 10,
							teacherId: teacherId,
							studentId: studentId,
							phone: phone,
						},
						success: res => {
							if (res.data.code == 200) {
								let list = JSON.parse(JSON.stringify(this.tabs[this.current].list));
								this.allList = res.data.data.pageData;
								if (page == 1) {
									this.$set(this.tabs[this.current], 'list', res.data.data.pageData);
									this.$set(this.tabs[this.current], 'status', list.length < res.data.data.totalPageNum ?
										'loadmore' : 'nomore');
								} else {
									if (list.length < res.data.data.totalPageNum) {
										list = list.concat(res.data.data.pageNo)
										this.$set(this.tabs[this.current], 'list', list);
										this.$set(this.tabs[this.current], 'status', list.length < res.data.data.totalPageNum ?
											'loadmore' : 'nomore');
									} else {
										this.$set(this.tabs[this.current], 'status', 'nomore');
										this.$set(this.tabs[this.current], 'page', page - 1);
									}
								}
								let keyList = [];
								res.data.data.pageData.forEach(item => {
									if (!keyList.includes(item.classesName)) {
										keyList.push(item.classesName);
									}
								});
								this.tabs = [{
									name: '全部',
									list: this.allList,
									page: 1,
									orderStatus: 0,
									status: 'loadmore',
								}];
								keyList.forEach(itemName => {
									this.tabs.push({
										name: itemName,
										list: [],
										page: 1,
										orderStatus: 0,
										status: 'loadmore',
									});
								});								
								if (this.curClassesName && this.curClassesName!='') {
									let index = keyList.indexOf(this.curClassesName)+1;
									this.current = index;
									let curList = [];
									this.allList.forEach(item => {
										if (item.classesName===this.curClassesName) {
											curList.push(item);
										}
									})
									if (this.current!=0) {
										this.tabs[this.current].list = curList;
										this.$set(this.tabs[this.current], 'list', curList);
									}
								}
							}
						},
						fail: err => {
							console.log(err, 'err');
						}
					})																		
			},
			scrolltolower() {
				this.tabs[this.current].page += 1;
				this.getMyOrderList();
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.current = current;
				if (e.name==='全部'&&this.tabs[current].list.length==0) {
					this.getMyOrderList()
				}else if (e.name) {
					let curList = [];
					this.allList.forEach(item => {
						if (item.classesName===e.name) {
							curList.push(item);
						}
					})
					this.tabs[current].list = curList;
				}
			},
			tabsChange(e) {
				this.page = 1;
				this.current = e.index;
				if (e.name==='全部'&&this.tabs[e.index].list.length==0) {
					this.getMyOrderList()
				}else if (e.name==='全部') {
					this.tabs[0].list = this.allList;
				}else {
					let curList = [];
					this.allList.forEach(item => {
						if (item.classesName===e.name) {
							curList.push(item);
						}
					})
					this.tabs[e.index].list = curList;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0;
		padding-top: 82rpx;
		margin-top:5px;
		.swiper {
			width: 100%;
			height: calc(100vh - 88rpx - 82rpx);
			padding: 20rpx 40rpx;
			box-sizing: border-box;
		}

		.list_item {
			padding: 30rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			color: #333;
			border: 1px solid #eee;
			position: relative;
			&_top {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				margin-bottom: 30rpx;
			}

			&_info {
				display: flex;

				&_text {
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;					

					.title {
						font-size: 24rpx;
						color: #333;
					}

					.order {
						color: #333;
						font-size: 24rpx;
						
					}
				}
			}

			&_pay {
				margin-top: 30rpx;
				border-top: 2rpx solid #eee;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 18rpx;

				&_right {
					.time {
						font-size: 24rpx;
						color: #FF7D51;
						margin-bottom: 10rpx;
					}

					.tips {
						font-size: 24rpx;
						color: #C6C8DB;
					}
				}
			}
		}
	}

	.small_btn {
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
		border-radius: 16rpx;
		background-color: #1cc7c2;
		border: none;
		margin-top: 18rpx !important;
	}

	.modal_content {
		width: 100%;

		.radio_item {
			width: 100%;
			padding: 30rpx;
			border-radius: 16rpx;
			border: 2rpx solid #414571;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}
		}

		.active {
			border-color: #fff;
		}
	}

	/deep/ .u-count-down__text {
		color: #FF7D51;
	}
	/deep/ .uni-modal{
		border-radius: 20px !important;
	}
</style>
